<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html>
<head>
<style type="text/css">
.div1{
	margin-left:750px;
	margin-top:170px;
}
body{
	background:url(images/bg.jpg);
	width:1000px;
	height:auto;
	margin:0px;
	
}
.mybtn{
	width: 86px;
text-align: center;
line-height: 100%;
padding-top: 0.5em;
padding-right: 2em;
padding-bottom: 0.55em;
padding-left: 2em;
font-family: "Arial Black", Gadget, sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: normal;
text-decoration: none;
margin-top: 0px;
margin-right: 2px;
margin-bottom: 0px;
margin-left: 2px;
vertical-align: text-bottom;
display: inline-block;
cursor: pointer;
zoom:1;
outline-width:medium;
outline-color:inherit;
font-size-adjust:none;
font-stretch:normal;
border-top-left-radius:0.5em;
border-top-right-radius:0.5em;
border-bottom-left-radius:0.5em;
border-bottom-right-radius:0.5em;
box-shadow:0px 1px 2px rgba(0,0,0,0.2);
color:#fefee9;
border-top-color:#da7c0c;
border-right-color:#da7c0c;
border-bottom-color:#da7c0c;
border-left-color:#da7c0c;
border-top-width:1px;
border-right-width:1px;
border-bottom-width:1px;
border-left-width:1px;
border-top-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;
background-image:none;
background-attachment:scroll;
background-repeat:repeat;
background-position-x:0%;
background-position-y:0%;
background-size:auto;
background-origin:padding-box;
background-clip:padding-box;
background-color:#f78d1d;
}
</style>
<script type="text/javascript">
	function reloadImage(t){
		t.src="servlet/CheckCodet";
	}
	function checkstr(str){
		var n=0;
			for(i=0;i<str.length;i++){
				var leg=str.charCodeAt(i);
				if(leg>255){
					n+=2;
				}else{
					n+=1;
				}
			}
			if(n>10){
				return true;
			}else{
				return false;
			}
			
	}
	function chkinput(form){
		if(form.username.value==""){
			alert("请输入用户名");
			form.username.focus();
			return false;
		}
		if(checkstr(form.username.value)){
			alert("您输入的用户名过长，请重新输入！");
			form.username.focus();
			return false;
		}
		if(form.userpwd.value==""){
			alert("请输入用户密码！");
			form.userpwd.focus();
			return false;
		}
		if((form.userpwd.value.length)<=4){
			alert("您输入的密码过短，请重新输入！ ");
			form.userpwd.focus();
			return false;
		}
		
		return true;
	}
	</script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>请登录</title>
</head>
<body>
<div class="div1">
<h3 style="margin-left:50px">用户登录</h3>
	<form action="servlet/LoginServlet" method="post" name="loginform">
		<table>
			<tr>
				<td width="50px">用户名</td>
				<td><input type="text" name="username"  placeholder="请输入用户名"></td>
			</tr>
			<tr>
				<td width="50px">密码</td>
				<td><input type="password" name="pwd"  placeholder="请输入密码"></td>
			</tr>
			<tr>
				<td width="50px">验证码</td>
				<td > <input type="text" name="checkcode"  placeholder="请输入验证码"><img alt="看不清，点击这里" src="servlet/CheckCode" onClick="reloadImage(this)">
				    </td>
			</tr>
			<tr>
				<td></td>
				<td align="left"><a href="register.jsp">立即注册</a></td>
			</tr>
			<tr>
				<td width="50px"><input type="reset" value="重置" style="background-color:#F93" class="mybtn"></td>
				<td><input type="submit" value="登录" onClick="chkinput(loginform)" style="background-color:#F93 " class="mybtn" ></td>
			</tr>
		</table>
	</form>
    </div>
</body>
</html>